<template>
    <div class="page-body">
        <div id="title">
            <span class="fa fa-chevron-left" @click="back" id="back"></span>
            <span>商品分类</span>
            <span></span>
        </div>
        <div class="kind-main">
            <div class="kind-main-left" ref="bigdiv">
                <div 
                    v-for="b in bkind" 
                    @click="kindClick($event,b.bigkind)"
                    @touchstart="touchClick" 
                    @touchmove="categoryMove" 
                    @touchend="categorEnd"
                    :class="{bigitem:bigtext==b.bigkind}"
                >{{b.bigkind}}</div>
            </div>
            <div class="kind-main-right" ref="kindmain">
                <div class="kinditem-root">
                    <img :src="bigKindItem.img" class="head-img">
                <div class="kinditem-main">
                <div 
                    v-for="c in bigKindItem.contain" class="kinditem-main-item"
                >
                    <router-link 
                        :to="{path:'/sort/kind/skind',query:{skind:c.smallkind,bkind:bigKindItem.bigkind}}">
                        <img :src="'/imgs/smallkind/'+c.img" >
                        <p style="color:black">{{c.smallkind}}</p>
                    </router-link>
                </div>
            </div>
        </div>
            </div>
        </div>

        <TabBar></TabBar>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import TabBar from '@/components/TabBar.vue'
export default {
    data:function(){
        return {
            bigtext:'热门推荐',
            // 拖动的距离
            dis:'',
            // 大div的高
            top:'',
            //最大拖动距离
            maxDis:'',
        }
    },
    methods: {
        back:function(){
            history.back();
        },
        touchClick: function (e) {
            this.top = this.$refs.bigdiv.offsetTop - 44;
            this.dis = e.touches[0].clientY;
        },
        kindClick: function(e,b) {
            this.bigtext = b;
            // console.log(this.bigtext);
            this.$refs.bigdiv.classList.add("transtion");
            this.top = this.$refs.bigdiv.offsetTop - 44;
            this.maxDis = this.$refs.bigdiv.scrollHeight-this.$refs.bigdiv.clientHeight;

            if(e.target.offsetTop<=this.maxDis){
                this.$refs.bigdiv.style.top=-e.target.offsetTop+"px";
            }else{
                if(this.maxDis+this.top<e.target.offsetTop+this.top){
                    this.$refs.bigdiv.style.top=-this.maxDis+"px";
                }
            }

            this.$refs.kindmain.style.opacity = 0;
            // this.$store.commit("setKindName",e.target.innerHTML);
            var param = {
                bigkind: e.target.innerHTML
            }
            setTimeout(()=> {
                this.$store.dispatch("requestBigKindItem", param);
                this.$refs.kindmain.style.opacity = 1;
            }, 400);
        },
        
        categoryMove: function (e) {
            var box = this.$refs.bigdiv;
            box.classList.remove("transtion");
            // console.dir(ul.classList[0]=='');
            var moveDis = e.touches[0].clientY - this.dis;
            box.style.top = moveDis + this.top + "px";
            // console.log(moveDis);
        },
        categorEnd: function (e) {
            //最大拖动距离等于元素内容高度-元素高度
            this.$refs.bigdiv.classList.add("transtion");
            this.maxDis = this.$refs.bigdiv.scrollHeight-this.$refs.bigdiv.clientHeight;
            this.top = this.$refs.bigdiv.offsetTop - 44;
            if (this.top > 0) {
                this.$refs.bigdiv.style.top = 0;
            }
            if(this.top<-this.maxDis){
                this.$refs.bigdiv.style.top = -this.maxDis+"px";
            }
            // console.log(this.top)
        }

    },
    components:{
        TabBar
    },
    computed:{
        ...mapState([
            "bkind",
            "bigKindItem"
        ])
    },
    mounted:function(){
        this.$store.dispatch("requestBkind")
    }

}
</script>

<style scoped>

.kind-root {
    width: 100%;
    height: calc(100vh - 57px);
    background-color: #fefefe;
}

.header {
    padding: 2px 5px;
    width: 100vw;
    height: 44px;
    background-color: #7D9CB2;
    z-index: 30;
}

.header img {
    height: 44px;
}

.header h1 {
    margin: 0;
    margin-left: 25vw;
    font-size: 18px;
    display: inline-block;
    position: relative;
    top: -16px;
    color: white;
}

.kind-main {
    height: calc(100vh - 101px);
    display: flex;
    overflow: hidden;
}

.kind-main-left {
    position: relative;
    width: 25vw;
    flex-shrink: 0;
    font-size: 14px;
    /*overflow: hidden;*/
    height: 100%;
}

.kind-main-left>div {
    width: 100%;
    text-align: center;
    padding: 15px 12px;
    border-bottom: 1px solid #eee;
}

.kind-main-right {
    height: calc(100vh - 101px);
    padding: 10px 5px;
    padding-top: 7px;
    padding-left: 8px;
    flex-grow: 1;
    background-color: #eee;
    opacity: 1;
    transition: all 0.4s;
}
.transtion{
    transition: top 0.7s;
}
.bigitem{
    color: #ee0000;
    background-color: #eee;
}
.head-img{
width: 100%;
}
.kinditem-main{
    width: 100%;
    background-color: #fefefe;
    margin-top: 5px;

    padding: 10px;
    display: flex;
    flex-wrap: wrap;
}
.kinditem-main-item{
    padding: 10px;
    /*padding-top: 0;*/
    padding-bottom: 5px;
    width: 33.33%;
    text-align: center;
}
.kinditem-main-item img{
    width: 100%;
}
.kinditem-main-item p{
    font-size: 12px;
}
#title{
    display:flex;
    justify-content:space-around;
    background-color:red;
    height:40px;
    line-height:40px;
}
#title span{
    color:white;
    font-size:18px;
}
#back{
    line-height:40px;
    color:white;
}


</style>